<template>
	<view class="fixed-btn-wrap">
		<view class="fixed-btn" @click="handleClickFixBtn">
			<image src="../static/images/icon_menu.png" mode="widthFix" class="fixed-btn-icon"></image>
		</view>
		<view class="fixed-poup" v-show="showSideMenu">
			<view class="prelative">
				<!-- 新建按钮是固定的 -->
				<view class="fixed-poup-row" @click="createPage" v-if="isShow.indexOf('new') != -1">
					<image src="../static/images/icon_menu_01.png" mode="widthFix" class="fixed-poup-icon">
					</image>
					<text class="fixed-poup-text">新建</text>
				</view>
				<view class="fixed-poup-row" @click="finished" v-if="isShow.indexOf('handle') != -1">
					<image src="../static/images/icon_menu_03.png" mode="widthFix" class="fixed-poup-icon">
					</image>
					<text class="fixed-poup-text">办结</text>
				</view>

				<view class="fixed-poup-row" v-if="isShow.indexOf('delete') != -1" @click="handleDelete">
					<image src="../static/images/icon_menu_close.png" mode="widthFix" class="fixed-poup-icon">
					</image>
					<text class="fixed-poup-text">删除</text>
				</view>
				<view class="fixed-poup-row" v-if="isShow.indexOf('clear') != -1" @click="handleClear">
					<image src="../static/images/icon_menu_close.png" mode="widthFix" class="fixed-poup-icon">
					</image>
					<text class="fixed-poup-text">清除</text>
				</view>
				<view class="fixed-poup-row" v-if="isShow.indexOf('export') != -1" @click="handleExport">
					<image src="../static/images/icon_menu_02.png" mode="widthFix" class="fixed-poup-icon">
					</image>
					<text class="fixed-poup-text">导出</text>
				</view>
				<view class="fixed-poup-row" v-if="isShow.indexOf('cancle') != -1" @click="handlePause">
					<image src="../static/images/icon_menu_04.png" mode="widthFix" class="fixed-poup-icon">
					</image>
					<text class="fixed-poup-text">暂缓/取消暂缓</text>
				</view>
				<view class="fixed-poup-row" @click="waitSubmit" v-if="isShow.indexOf('waitsubmit') != -1">
					<image src="../static/images/icon_menu_04.png" mode="widthFix" class="fixed-poup-icon">
					</image>
					<text class="fixed-poup-text">纳入本周待提交</text>
				</view>
				<view class="fixed-poup-row" @click="send" v-if="isShow.indexOf('send') != -1">
					<image src="../static/images/icon_menu_04.png" mode="widthFix" class="fixed-poup-icon">
					</image>
					<text class="fixed-poup-text">报送</text>
				</view>
				<view class="fixed-poup-row" @click="sendWritten" v-if="isShow.indexOf('written') != -1">
					<image src="../static/images/icon_menu_01.png" mode="widthFix" class="fixed-poup-icon">
					</image>
					<text class="fixed-poup-text">新增批示</text>
				</view>
				<view class="fixed-poup-row" @click="weeksend" v-if="isShow.indexOf('bring') != -1">
					<image src="../static/images/icon_menu_04.png" mode="widthFix" class="fixed-poup-icon">
					</image>
					<text class="fixed-poup-text">纳入本周报送</text>
				</view>
				<view class="fixed-poup-row" @click="leaderReview" v-if="isShow.indexOf('review') != -1">
					<image src="../static/images/icon_menu_04.png" mode="widthFix" class="fixed-poup-icon">
					</image>
					<text class="fixed-poup-text">组长审核</text>
				</view>
				<view class="fixed-poup-close" @click="handleClose">
					<image src="../static/images/icon_menu_close.png" mode="widthFix" class="fixed-poup-close-icon">
					</image>
				</view>

			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "mix-float-menu",
		data() {
			return {
				showSideMenu: false
			};
		},
		props: {
			isShow: {
				type: String,
				default: 'new',

			},
			showMenu: {
				type: Boolean,
				default: false
			}
		},
		methods: {
			handleClickFixBtn() {
				this.showSideMenu = true;
				this.$emit('onBtnClick')
			},
			handleClose() {
				this.showSideMenu = false;
				this.$emit('onClose')
			},
			createPage() {
				this.$emit('add')
			},
			//点击办结
			finished() {
				this.$emit('onFinish')
			},
			//本周待提交
			waitSubmit() {
				this.$emit('onWaitsubmit')
			},
			sendWritten() {
				this.$emit('sendWritten')
			},
			//报送
			send() {
				this.$emit('onSend')
			},
			//纳入本周报送
			weeksend() {
				this.$emit('onWeekSend')
			},
			//删除
			handleDelete() {
				this.$emit('onDelete')
			},
			//导出
			handleExport() {
				this.$emit('onExport')
			},
			//暂缓
			handlePause() {
				this.$emit('onPause')
			},
			//清除
			handleClear() {
				this.$emit('onClear')
			},
			//组长审核
			leaderReview() {
				this.$emit('onReview')
			}
		},
		watch: {
			showSideMenu() {

				return this.showMenu
			}
		}
	}
</script>

<style lang="scss" scoped>
	.fixed-btn {
		position: fixed;
		bottom: 30rpx;
		right: 30rpx;
		width: 80rpx;
		height: 80rpx;
		border-radius: 50%;
		box-shadow: 0px 0px 10px 0px rgba(84, 0, 0, 0.2);
		display: flex;
		align-items: center;
		justify-content: center;
		z-index: 10;

		.fixed-btn-icon {
			width: 20px;
			height: 20px;
		}
	}

	.fixed-poup {
		position: fixed;
		z-index: 20;
		border-radius: 10px;
		background: #FFFFFF;
		padding: 30rpx;
		bottom: 20rpx;
		right: 20rpx;
		z-index: 90;
		width: 240rpx;
		max-height: 400rpx;
		min-height: 160rpx;
		box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2);

		.fixed-poup-row {
			display: flex;
			align-items: center;
			margin-bottom: 20rpx;
		}

		.fixed-poup-icon {
			width: 30rpx;
			height: 30rpx;
			margin-right: 20rpx;
		}

		.fixed-poup-text {
			font-size: 26rpx;
			color: #414a5d;
		}

		.fixed-poup-close {
			position: absolute;
			right: -15px;
			top: -15px;
			width: 60rpx;
			height: 60rpx;
			display: flex;
			justify-content: center;
			align-items: center;
		}

		.fixed-poup-close-icon {
			width: 20rpx;
			height: 20px;
		}

	}
</style>
